<template>
  <div v-loading="loading">
    <!-- <page-header /> -->
    <!-- 订单基本信息 -->
    <div class="order-container">
      <h2><i class="back-icon el-icon-back" @click="goBack" /> 订单详情</h2>
      <div class="deliery-div">
        <p style="color:#66b1ff">收货信息：</p>
        <el-row>
          <el-col :span="4">收获地址</el-col>
          <el-col :span="20">{{ address?
            address.province +
            address.city +
            address.town +
            " " +
            address.detail:'暂无'
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">收件人</el-col>
          <el-col :span="20">{{ address? address.username:'暂无' }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">手机号</el-col>
          <el-col :span="20">{{ address?address.phone:'暂无' }}</el-col>
        </el-row>
      </div>
      <el-divider />
      <div class="order-message-div">
        <p style="color:#66b1ff">订单信息：</p>
        <el-row>
          <el-col :span="4">订单编号</el-col>
          <el-col :span="20">{{ orderDetailArr[0].orderNum }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">下单时间</el-col>
          <el-col :span="20">{{ orderDetailArr[0].createTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">物流</el-col>
          <el-col v-if="logistics" :span="20">
            {{ logistics?logistics.logisticsTypeQo.name :'暂无' }}
            <el-link
              type="primary"
              href="https://www.kuaidi100.com/?from=openv"
              target="_blank"
            >{{ logistics?logistics.logNum :'暂无' }}</el-link>
          </el-col>
          <el-col v-else :span="20">暂无</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">订单状态</el-col>
          <el-col :span="20">
            <template v-if="orderDetailArr[0].status === 0">未支付</template>
            <template
              v-else-if="
                orderDetailArr[0].status === 1 || orderDetailArr[0].status === 2
              "
            >待收货</template>
            <template
              v-else-if="orderDetailArr[0].status === 3"
            >已取消</template>
            <template
              v-else-if="orderDetailArr[0].status === 4"
            >已完成</template>
            <template
              v-else-if="orderDetailArr[0].status === 5"
            >已超时</template>
          </el-col>
        </el-row>
      </div>
      <el-divider />
      <!-- 购买商品信息 -->
      <div class="order-detail-div">
        <el-table :data="orderDetailArr" style="width: 100%">
          <el-table-column label="商品信息" width="250px" align="left">
            <template slot-scope="scope">
              <div class="book-img-des-container">
                <div class="book-img">
                  <el-image
                    style="width: 100px; height: 100%"
                    :src="scope.row.book?scope.row.book.bookImgs[0].imgName:''"
                  />
                </div>
                <div class="book-des">
                  <div class="book-name">
                    <div :title="scope.row.book? scope.row.book.bookName :'暂无'">{{ scope.row.book? scope.row.book.bookName :'暂无' }}</div>
                    <!-- <span>是大红色的浓而hi士大夫红四是覅i</span> -->
                  </div>
                  <div class="book-author">
                    <div :title="scope.row.book? scope.row.book.author :'暂无'">{{ scope.row.book? scope.row.book.author :'暂无' }}</div>
                    <!-- <span>是大红色的浓而hi士大夫红四是覅i</span> -->
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单价" align="left">
            <template slot-scope="scope">
              <span style="color: #f40">￥{{ scope.row.price | num2Point }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="num" />
          <el-table-column label="总金额" align="left">
            <template slot-scope="scope">
              <span
                style="color: #f40"
              >￥{{ scope.row.price * scope.row.num | num2Point }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left">
            <template slot-scope="scope">
              <el-row>
                <el-col v-if="scope.row.status === 1" :span="12">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleSend(scope.$index,scope.row)"
                  >订单发货</el-button>
                </el-col>

              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>
<script>
import * as order from '@/utils/order'
export default {

  data() {
    return {
      loading: false,
      // 修改收货地址id
      selectAddId: '',
      dialogVisible: false,
      orderDetail: ''
    }
  },
  computed: {

    orderDetailArr() {
      const arr = []
      arr.push(this.orderDetail)
      // console.log(arr)
      return arr
    },
    address() {
      return this.orderDetail.address
    },
    logistics() {
      return this.orderDetail.logistics
    },
    book() {
      return this.orderDetail.book
    }

  },
  created() {
    this.getOrderById()
  },
  methods: {
    // 订单发货
    handleSend(index, obj) {
      const arr = []
      arr.push({ id: obj.id, status: 2 })
      order.updateStatus(arr).then(res => {
        // this.orderDetail = res.object[0]
        this.$notify({
          title: '成功',
          message: '发货成功',
          type: 'success'
        })
        order.getOrderById(obj.id).then(res => {
          this.orderDetail = res.object
        })
      })
    },
    getOrderById() {
      const oid = this.$route.params.oid
      console.log(oid)
      if (oid > 0) {
        order.getOrderById(oid).then(res => {
          this.orderDetail = res.object
        })
      }
    },
    goBack() {
      this.$router.push('/order/index')
    }

  }

}
</script>
<style lang="scss" scoped>
.back-icon:hover {
  color: #77baff;
}

.radio-sel{
  margin-left: 20px !important;
  margin-bottom: 8px;
}
.order-container {
  // background-color: hotpink;
  height: 500px;
  margin-top: 50px;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 120px;
  .deliery-div {
    margin: 0 20px;
    .el-row {
      margin-top: 10px;
    }
  }
  .order-message-div {
    margin: 0 20px;
    .el-row {
      margin-top: 10px;
    }
  }
  .order-detail-div {
    .book-img-des-container {
      display: flex;
      justify-content: space-between;
      .book-img {
        // flex: 1;
        height: 100px;
      }
      .book-des {
        // flex: 2;
        margin-left: 10px;
        width: 150px;
        display: flex;
        flex-direction: column;
        .book-name,
        .book-author {
          width: 100%;
          div
          {
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-x: hidden;
          }

        }
      }
    }
  }
}

.title {
  background-color: #e8f2ff;
}
</style>
